<template>
  <el-dialog v-model="visible" :title="title" width="1560px" draggable align-center>
    <el-table :data="data" border height="750px">
      <el-table-column label="序号" width="60" align="center">
        <template #default="{ $index }">
          {{ $index + 1 }} <!-- 使用 $index 计算序号 -->
        </template>
      </el-table-column>
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop"
                       :label="column.label"
                       :width="column.width" :align="column.align" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <div :style="{ backgroundColor: column.prop === 'indexId' ? row.indexIdColor : '' }">
            <div :class="{
            'red-background': column.prop === 'orderStatus' && (row.orderStatus === '暂停(有群)' || row.orderStatus === '已取消'),
            'green-background': column.prop === 'orderStatus' && (row.orderStatus === '已完成'),
            'green-dayao': column.prop === 'orderStatus' && (row.orderStatus === '定期维护'),
          }">
              {{ row[column.prop] }}
            </div>
          </div>
        </template>
      </el-table-column>

    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref} from "vue";
import request from "@/config/axios";

const visible = ref(false)
const title = ref('使用订单列表')
const data = ref([])


const columns = ref([])

const columnOrder = ref([
  {prop: 'orderStatus', label: '处理状态', width: '100', align: 'center'},
  {prop: 'indexId', label: '合作编号', width: '100', align: 'center'},
  {prop: 'customName', label: '客户姓名', width: '100', align: 'center'},
  {prop: 'sex', label: '性别', width: '60', align: 'center'},
  {prop: 'businessType', label: '业务类型', width: '100', align: 'center'},

  {prop: 'phoneCode', label: '转接手机号', width: '180',},
  {prop: 'trusteeshipType', label: '托管', width: '60', align: 'center'},
  {prop: 'orderReceiveDate', label: '接单日期', align: 'center'},
  {prop: 'orderEndDate', label: '结束日期', align: 'center'},

]);

const columnXS = ref([
  { prop: 'priority', label: '优先级', width: '100', align: 'center' },
  { prop: 'chargeFlag', label: '客户类型', width: '100', align: 'center' },
  { prop: 'handleUserNo', label: '处理人', width: '100', align: 'center' },
  { prop: 'receiveDate', label: '接单日期', width: '100', align: 'center' },
  { prop: 'handleStatus', label: '处理状态', width: '100', align: 'center' },
  { prop: 'indexId', label: '合作编号', width: '120', align: 'center' },
  { prop: 'customName', label: '客户姓名', width: '100', align: 'center' },
  { prop: 'receivePhone', label: '群名手机号', width: '140', align: 'center' },
  { prop: 'comePhone', label: '进线手机号', width: "120", align: 'center'},
  { prop: 'sex', label: '性别', width: '100', align: 'center' },
  { prop: 'debtType', label: '处理平台', width: '100', align: 'center' },
  { prop: 'appeal', label: '诉求', width: '120', align: 'center' },
  { prop: 'handleProcessMemo', label: '最新处理情况', width: '100', align: 'center' },
  { prop: 'lastHandleTime', label: '最后处理时间', width: '130', align: 'center' },
  { prop: 'deliverFlag', label: '是否交付', width: '100', align: 'center' },
  { prop: 'hasGroupFlag', label: '是否有群', width: '100', align: 'center' },


  { prop: 'memo', label: '备注', align: 'center' }
])

const columnWH = ref([
  {prop: 'userType', label: '客户类型', width: '100', align: 'center'},
  {prop: 'handleUser', label: '处理人', width: '100', align: 'center'},
  {prop: 'receiveDate', label: '接单日期', width: '100', align: 'center'},
  {prop: 'handleStatus', label: '处理状态', width: '100', align: 'center'},
  {prop: 'indexId', label: '合作编号', width: '100', align: 'center'},
  {prop: 'customName', label: '客户姓名', width: '120', align: 'center'},
  {prop: 'chargeFlag', label: '群名手机号', width: '100', align: 'center'},
  {prop: 'comePhone', label: '进线手机号', width: "120", align: 'center'},
  {prop: 'sex', label: '性别', width: '100', align: 'center'},
  {prop: 'reservePhone', label: '预留手机号', width: '120', align: 'center'},
  {prop: 'handlePlatform', label: '处理平台', width: '100', align: 'center'},
  {prop: 'freezeType', label: '冻结类型', width: '100', align: 'center'},
  {prop: 'applyTime', label: '申请时间', width: '120', align: 'center'},
  {prop: 'mailDate', label: '邮寄时间', width: "120", align: 'center'},
  {prop: 'handelProcess', label: '最新处理情况', width: "120", align: 'center'},
  {prop: 'lastHandleTime', label: '最后处理时间', width: "120", align: 'center'},
  {prop: 'promptMode', label: '提示方式', width: '120', align: 'center'},
  {prop: 'transferFlag', label: '是否转让', width: '100', align: 'center'},
  {prop: 'caseNo', label: '案号', width: '180', align: 'center'},
  {prop: 'applyUser', label: '申请人',width: '160' ,align: 'center'},
  {prop: 'courtName', label: '法院名称', width: "160", align: 'center'},
  {prop: 'countPhone', label: '法院电话', width: "120", align: 'center'},
  {prop: 'receiveUser', label: '收件人', width: "120",align: 'center'},
  {prop: 'letterFlag', label: '是否写信', width: "120", align: 'center'},
  {prop: 'lastHandleUser', label: '最后处理人', width: "120", align: 'center'}
])

async function fetchData(type, row) {
  if (!type) {
    columns.value = columnOrder.value
    data.value = await request.get({
      url: '/order/getUseOrderList',
      params: {transferPhone: row.id}
    })
  } else if (type === 'XS') {
    columns.value = columnXS.value
    data.value = await request.get({
      url: '/negotiation/listAllByPhoneCode',
      params: {id: row.id}
    })
  } else if (type === 'WH') {
    columns.value = columnWH.value
    data.value = await request.get({
      url: '/thawInfo/listAllByPhoneCode',
      params: {id: row.id}
    })
  }
}


defineExpose({
  open: (type, row) => {
    visible.value = true
    console.log('row', row)
    fetchData(type, row)
  }
})

</script>

<style scoped lang="scss">

.el-table .purple-background {
  background: rgb(169, 96, 253) !important;
  color: white;
  /* 确保样式优先级 */
}

.el-table .red-background {
  background: #f53506 !important;
  color: white;
  /* 确保样式优先级 */
}

.el-table .green-background {
  background: #36f506 !important;
  color: white;
  /* 确保样式优先级 */
}

.el-table .green-dayao {
  background: #e6a23c !important;
  color: white;
  /* 确保样式优先级 */
}

</style>
